<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="<?=base_url()?>templates/js/jcrop/jquery.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>templates/js/jcrop/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="<?=base_url()?>templates/js/jcrop/css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
#parent_container {
	position: relative;
}
#resizable {
	background: none repeat scroll 0 0 silver;
	float: left;
	height: 100px;
	left: 0;
	opacity: 0.4;
	position: absolute;
	top: 0;
	border: 1px solid;
	width: 100px;
	z-index: 100;
}
.box_info {
	height: 20px;
	/*border: solid 1px #9d9d9d;*/
	margin-bottom: 10px;
	padding: 5px;
}
.crop_info {
	width: 100px;
	height: 10px;
	color: #0066CC;
	font-size: 16px;
	margin-bottom: 10px;
}
</style>
    </head>
    <body style="font-size:62.5%;">
    <form id='frm' action='<?=base_url()?>mod_file_manager/image_manager/create' method='post' >
        <div id='parent_container' style=''> <img src="" id='crop_img' />
            <input type="hidden" name="x1" value="" />
            <input type="hidden" name="y1" value="" />
            <input type="hidden" name="x2" value="" />
            <input type="hidden" name="y2" value="" />
            <input type="hidden" name="thumb_width" value="" />
            <input type="hidden" name="thumb_height" value="" />
            <input type="hidden" name="image_name" value="" />
            <br/>
            <div class="box_info"> 
                <!--W <input type="text" name="des_w" id="des_w" value="" style="width:50px; display:none;" />
                H <input type="text" name="des_h" id="des_h" value="" style="width:50px; display:none;" />--> 
                <span class="crop_info" id="size_image" style="display:none;"></span>
                <input type="button" name="submit" id="btn_submit" value="Crop" />
            </div>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
function showCoords(c)
{
	/*$('#x1').val(c.x);
	$('#y1').val(c.y);
	$('#x2').val(c.x2);
	$('#y2').val(c.y2);
	$('#w').val(c.w);
	$('#h').val(c.h);*/
	$('input[name="x1"]').val(c.x);
	$('input[name="y1"]').val(c.y);
	$('input[name="x2"]').val(c.x2);
	$('input[name="y2"]').val(c.y2);
	$('input[name="thumb_width"]').val(parseInt(c.w));
	$('input[name="thumb_height"]').val(parseInt(c.h));
	$("#size_image").html(parseInt(c.w)+'X'+parseInt(c.h));
};

function clearCoords()
{
	// $('#coords input').val('');
};
function getimg()
{
	var img = parent.imgLib.config.dir_img;
	if(img=='') closewindow();
	$('#crop_img').attr('src','<?=base_url_site()?>uploads/'+ img)  ;
	$('input[name="image_name"]').val("../uploads/"+ img);
	$('#filename').val(img) ;
	

	$('#crop_img').on('load', function() {
		var jcrop_api;
		$('img#crop_img').Jcrop({
		  onChange:   showCoords,
		  onSelect:   showCoords,
		  onRelease:  clearCoords,
		  boxWidth: 900, 
		  boxHeight: 500,
		  aspectRatio:parent.imgLib.config.width / parent.imgLib.config.height
		},function(){
		  jcrop_api = this;
		});
		

	});
}
function closewindow()
{
	alert('Không tìm thấy file.');
	parent.$.colorbox.close() ;
}
$(document).ready(function(){
	getimg() ;
	
	$('#btn_submit').click(function(){
		thumb_width = $('input[name="thumb_width"]').val();
		thumb_height = $('input[name="thumb_height"]').val();
		var des_w = (parent.imgLib.config.width!='')? parent.imgLib.config.width:$("#des_w").val();
		var des_h = (parent.imgLib.config.height!='')? parent.imgLib.config.height:$("#des_h").val();
		if(thumb_width > 0&&thumb_height>0)
		{
			$.ajax({
				type:"POST",
				url:"<?=base_url()?>mod_file_manager/image_manager/create",
				data:{
					image_name:$('input[name="image_name"]').val(),
					w:thumb_width,
					h:thumb_height,
					x:$('input[name="x1"]').val(),
					y:$('input[name="y1"]').val(),
					des_w:des_w,
					des_h:des_h
				}
				,cache:false,
				success:function(data)
				{
					parent.imgLib.crop(data);
					parent.$.fn.colorbox.close();
				}
				,dataType: 'json'
			});
		}else{
			alert("Please select portion..!");
		}
	});
	$("#des_w").keyup(function() {
			var w = $("#des_w").val();
			var h = $("#des_h").val();
			if(w!=''&&h!=''){
				if(parent.imgLib.config.width==""&&parent.imgLib.config.height==''){
					var jcrop_api;
					$('img#crop_img').Jcrop({
					  onChange:   showCoords,
					  onSelect:   showCoords,
					  onRelease:  clearCoords,
					  boxWidth: 900, 
					  boxHeight: 500,
					  aspectRatio:w / h
					},function(){
					  jcrop_api = this;
					});
					
				}
			}
	});
	 $("#des_h").keyup(function() {
			var w = $("#des_w").val();
			var h = $("#des_h").val();
			if(w!=''&&h!=''){
				if(parent.imgLib.config.width==""&&parent.imgLib.config.height==''){
					var jcrop_api;
					$('img#crop_img').Jcrop({
					  onChange:   showCoords,
					  onSelect:   showCoords,
					  onRelease:  clearCoords,
					  boxWidth: 900, 
					  boxHeight: 500,
					  aspectRatio:w / h
					},function(){
					  jcrop_api = this;
					});
				}
			}
	});
});
</script>